<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学员约课</el-breadcrumb-item>
      <el-breadcrumb-item>约课列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图 -->
    <el-card>
      课程日期：
      <el-select v-model="updateAppointCourse.courseDate" @change="updateAppointCourseSelectChange" placeholder="请选择日期">
        <el-option
          v-for="item in courseUpdateDateList"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <!-- 约课列表区域 -->
      <el-table :data="courseList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="教练id" prop="coachUserid" v-if="false"></el-table-column>
        <el-table-column label="时间段" prop="coursePeriod" width="200px"></el-table-column>
        <el-table-column label="学员id" prop="studentUserid" v-if="false"></el-table-column>
        <el-table-column label="学员" prop="studentName" width="150px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.studentName" :type="scope.row.studentName==='已取消' ? 'info' : ''">{{ scope.row.studentName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="日期" prop="courseDate" width="150px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 课程关闭预约 -->
            <el-button size="mini" type="primary" icon="el-icon-remove-outline"
                       @click="closeAppoint(scope.row)" :disabled="scope.row.studentUserid !== null">关闭预约</el-button>
            <!-- 课程开启预约 -->
            <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline"
                       @click="openAppoint(scope.row)" :disabled="scope.row.studentUserid !== 0">开启预约</el-button>
            <!-- 查看教练信息按钮 -->
            <el-button size="mini" type="primary" icon="el-icon-search"
                       @click="lookStudent(scope.row.coachId)">查看学员信息</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>

<script>
export default {
  name: "Course",
  created() {
    this.getCourseAppointDate()
    this.getCourse()
  },
  data() {
    return {
      courseList: [],
      // 学员信息
      studentCoach: {},
      // 课程日期列表
      courseUpdateDateList: [],
      // 控制学员信息对话框的显示与隐藏
      courseStudentDialogVisible: false,
      // 取消课程信息
      updateAppointCourse: {
        coursePeriod: '',
        courseDate: ''
      }
    }
  },
  methods: {
    getCourse(){
      this.$http.get('/driver/course/coach/selfCourse', {
        params: {
        date : this.updateAppointCourse.courseDate
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.courseList = res.data.data
          // console.log(this.courseList)
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 获取课程日期列表
    getCourseAppointDate() {
      this.$http.get("driver/course/update/date").then(res => {
        if (res.data.code === 200) {
          this.courseUpdateDateList = res.data.data
          if (this.updateAppointCourse.courseDate === ''){
            this.updateAppointCourse.courseDate = this.courseUpdateDateList[0]
          }
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 取消课程选择日期选择器改变事件
    updateAppointCourseSelectChange(date){
      this.updateAppointCourse.courseDate = date
      this.getCourse()
    },
    // 关闭预约
    closeAppoint(course){
      this.$http.post("driver/course/close/appoint", course).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getCourse()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    //开启预约
    openAppoint(course){
      this.$http.post("driver/course/open/appoint", course).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getCourse()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 查看学员信息
    lookStudent(){
      this.$message.success("目前无法查看")
    }





  }
}
</script>

<style scoped>

</style>
